<template>
	<view>

		<view style="background-color: #3957BF;">
			<customNav bgColor="#3957BF" backIconColor="white"></customNav>
			<view class="page-wraper">
				<view class="text-view">车辆信息</view>
				<uniSendCar :title="'选择车型'" :isShowLeftImg='true' :isShowInput='false' :selectName="selectBrand"
					@selectClick='selectClick' :inta="1"></uniSendCar>
				<view class="line" />
				<uniSendCar :title="'外观内饰'" :isShowLeftImg='true' :isShowInput="false" :selectName="selectFacade"
					@selectClick='selectClick' :inta="2"></uniSendCar>
				<view class="line" />
				<uniSendCar :title="'上牌地区'" :isShowLeftImg='true' :isShowInput='false' @selectClick='selectClick'
					:inta="3" :selectName="selectUpBrandLocation">
				</uniSendCar>
				<view class="line" />
				<!-- 			<view  class="box-class">
					<view class="left-view-class">
						<image class="image-class-star" src="@/static/star.png"></image>
						<view class="text-class left-margin">电话报价</view>
					</view>
					<view class="right-view-class">
						<view class="right-view-class marginleft20" @click="phoneClick(1)">
							<image class="image-class-check-mark" src="@/static/check-mark.png" v-if="temp==1"></image>
							<view class="no-select-image" v-else></view>
							<view class="marginleft20 yes-no-text-class">是</view>
						</view>
						<view class="right-view-class marginleft20" @click="phoneClick(0)">
							<image class="image-class-check-mark" src="@/static/check-mark.png" v-if="temp==0"></image>
							<view class="no-select-image" v-else></view>
							<view class="marginleft20 yes-no-text-class">否</view>
						</view>
					</view>
				</view> -->
				<view class="line" />
				<uniSendCar :title="'车龄'" :isShowLeftImg='false' :isShowInput='false' @selectClick='selectClick'
					:inta="4" :selectName="selectCarAge">
				</uniSendCar>
				<view class="line" />
				<uniSendCar :title="'里程'" :isShowLeftImg='false' :isShowInput='false' :inta="5"
					@selectClick='selectClick' :selectName="selectOutside">
				</uniSendCar>
				<view class="line" />
				<uniSendCar :title="'预算'" :isShowLeftImg='false' :isShowInput='true' :inta="6"
					@meInputDigit='meInputDigit' :isDigit='true' :placeholder="'请输入预算'">
				</uniSendCar>
				<view class="line" />

				<!-- 备注相关内容 -->
				<!-- :class="{'check-view':true,'sub-btn-active':chooseMainList.includes(val)}" -->
				<view class="marginLeft30 marginTop20 beizhu-text-class">备注</view>
				<view class="beizhu-duoxuankuang-view-box" style="margin-top: 32rpx;">
					<view v-for="(item,index) in sortDataList" :key="index">
						<view
							:class="{'beizhu-item-view-text':true,'beizhu-item-view-text-select':carSearchReleaseAddData.notes.includes(item.name)}"
							@click="sortItemtap(item,index)">{{item.name}}</view>
						<!-- <view :class="item.selectSortItem?'beizhu-item-view-text-select':'beizhu-item-view-text'" @click="sortItemtap(item,index)">{{item.name}}</view> -->
					</view>
				</view>
				<textarea
					class="textarea-text-view-class marginTop20 marginleft20 border-s1c borderAll20 width93 pad20-10 height100"
					@input="inputPhoneNotes" placeholder="请输入" maxlength='25' placeholder-class="pcs" />
				<view class="search-car-text-class">寻车置顶</view>
				<view class="center-view-box marginTop10 marginbottom80">
					<view>
						<view v-for="(item,index) in searchTopContent.replace('\n',',').split(',')" :key="index">
							<view class=" flex3 search-content-up-text">{{item}}</view>
						</view>
					</view>

					<view class="flex7 center-view-box" @click="clickTopping()">
						<view class="flex3"></view>
						<view class="marginright30 price-jine-text-class"></view>
						<image class="image-class-check-mark marginright30" src="@/static/check-mark.png"
							v-if="carSearchReleaseAddData.topping==1"></image>
						<!-- <view class="no-select-image marginright30" v-else></view> -->
					</view>
				</view>
				<view
					class="marginbottom80 pad25-0 text-center borderAll20 btnBg marginleft20 marginright30 color-white"
					@click="sendBtn()">提交
				</view>
			</view>
		</view>
		<!-- 车龄弹窗 -->
		<uni-popup ref="car_age_popup" :animation="true" type="bottom" @maskClick="maskClickpopup()"
			@change="changePopup()">
			<view class="popup-bottom-view">
				<view class="car-age-text-popup">车龄</view>
				<view class="car-age-list-view-box">
					<view :class="carAgeTemp==999?'age-popup-car-bc-select-view':'age-popup-car-bc-view'">
						<view @click="selectCarAgeItemClickNOLimi()">不限车龄</view>
					</view>
					<view v-for="(item,index) in carAgeDataList">
						<view :class="carAgeTemp==index?'age-popup-car-bc-select-view':'age-popup-car-bc-view'">
							<view @click="carAgeItemClick(item,index)">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="car-age-btn-popup" @click="carAgeCLick()">确定</view>
			</view>
		</uni-popup>
		<!-- 表里弹窗 -->
		<uni-popup ref="Mileage_popup" :animation="true" type="bottom" @maskClick="maskClickpopup()"
			@change="changePopup()">
			<view class="popup-bottom-view">
				<view class="car-age-text-popup">里程</view>
				<view class="car-age-list-view-box">
					<view :class="mileageTemp==999?'age-popup-car-bc-select-view':'age-popup-car-bc-view'">
						<view @click="selectMileageItemClickNOLimi()">不限</view>
					</view>
					<view v-for="(item,index) in mileageDataList">
						<view :class="mileageTemp==index?'age-popup-car-bc-select-view':'age-popup-car-bc-view'">
							<view @click="mileageItemClick(item,index)">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="car-age-btn-popup" @click="mileageCLick()">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import customNav from "@/components/custom-nav/custom-nav.vue";
	import uniSendCar from '@/secondhandCar/uniSendCar/uniSendCar.vue';
	import {
		carSearchReleaseAdd,
		getUsedSearchAge,
		getUsedSearchMileage,
		getUsedSearchNotes
	} from "@/api/search-car.js";
	import {
		commonBrandsAdd
	} from "@/api/brand.js"
	import {
		configInfo
	} from '@/api/base.js'
	export default {
		components: {
			customNav,
			uniSendCar
		},
		data() {
			return {
				//需要传递请求的data
				carSearchReleaseAddData: {
					users_id: '', //用户id
					series_two_id: '', // 二级车系id
					source_type_id: '', // 车源类型id
					model_two_id: '', //二级车型id
					new_label: '', // 如 自定义车型时 填写自定义名称 前端限制25个字
					appearance_name: '', // 外观颜色
					appearance_color: '', // 外观色号
					interior_name: '', // 内饰颜色
					interior_color: '', // 内饰色号
					registration_province: '', // 省
					registration_city: '', // 市
					car_age: '', // 车龄
					mileage: '', // 里程
					budget_money: '', // 预算
					notes: [], // 备注标签
					describe: '', // 详细要求
					phone_quotation: '0', // 0：正常 1：电话报价
					topping: '0', // 0：正常 1：置顶
				},

				//
				selectBrand: '请选择车型',
				selectFacade: '请选择外观内饰',
				appearance_name: '', //外观颜色
				appearance_color: '', //  外观色号
				interior_name: '', // 内饰颜色
				interior_color: '', // 内饰色号
				selectUpBrandLocation: '请选择', //上牌地区

				selectCarAge: '请选择', //车龄
				carAgeTemp: 1000,
				carAgeTempCache: 1000,
				carAgeDataList: [{}, {}, {}, {}, {}], //车龄数据集合
				selectCarAgeCache: '',

				selectOutside: '请选择', //表里
				mileageTemp: 1000,
				mileageTempCache: 1000,
				mileageDataList: [{}, {}, {}, {}, {}], //车龄数据集合
				selectMileageCache: '',

				temp: 0,


				sortDataList: [{
						title: '1',
						name: '分期户'
					},
					{
						title: '2',
						name: '需高开'
					},
					{
						title: '3',
						name: '3天内提车'
					},
				],
				sortDataListCache: [], //备注数据选择列表
				//寻车置顶信息
				searchTopContent: '寻车置顶信息\n寻车置顶'

			}
		},
		onLoad() {
			var that = this
			const value = uni.getStorageSync('login')
			if (value) {
				this.carSearchReleaseAddData.users_id = value.id
			}
			getUsedSearchAge().then(res => {
				that.$utils.log("打印获取到的车龄getUsedSearchAge数据  " + JSON.stringify(res))
				if (res.code == 0) {
					that.carAgeDataList = res.data
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
			getUsedSearchMileage().then(res => {
				that.$utils.log("打印获取到的里程getUsedSearchMileage数据  " + JSON.stringify(res))
				if (res.code == 0) {
					that.mileageDataList = res.data
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
			getUsedSearchNotes().then(res => {
				that.$utils.log("打印获取到的备注数据  " + JSON.stringify(res))
				if (res.code == 0) {
					// that.sortDataList = res.data
					for (var i = 0; i < that.sortDataList.length; i++) {
						that.sortDataList[i].selectSortItem = false
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})

			configInfo().then(res => {//searchTopContent.replace('\n',',').split(',')
				this.$utils.log('打印返回的寻车置顶信息 ' + JSON.stringify(res.data.data.replace('\n',',').split(',')))
				if (res.code == 0) {
					this.searchTopContent = res.data.data
				}
			})

		},
		methods: {
			maskClickpopup() {
				this.$utils.log("点击模糊层")
				this.carAgeTemp = this.carAgeTempCache
				this.mileageTemp = this.mileageTempCache
			},
			changePopup() {},
			//车龄不限制点击item
			selectCarAgeItemClickNOLimi() {
				this.carAgeTemp = 999
				this.selectCarAgeCache = '不限'
			},
			//车龄弹窗 item点击
			carAgeItemClick(item, index) {
				this.carAgeTemp = index
				this.selectCarAgeCache = item.name
			},
			//车龄弹窗点击确定
			carAgeCLick() {
				this.carAgeTempCache = this.carAgeTemp
				if (this.selectCarAgeCache) {
					this.selectCarAge = this.selectCarAgeCache
					this.carSearchReleaseAddData.car_age = this.selectCarAgeCache
				}
				this.$refs.car_age_popup.close()
			},

			// 里程不限制点击item
			selectMileageItemClickNOLimi() {
				this.mileageTemp = 999
				this.selectMileageCache = '不限'
			},
			//里程弹窗 item点击
			mileageItemClick(item, index) {
				this.mileageTemp = index
				this.selectMileageCache = item.name
			},
			mileageCLick() {
				this.mileageTempCache = this.mileageTemp
				if (this.selectMileageCache) {
					this.selectOutside = this.selectMileageCache
					this.carSearchReleaseAddData.mileage = this.selectMileageCache
				}
				this.$refs.Mileage_popup.close()
			},
			//电话报价
			phoneClick(inta) {
				this.temp = inta
				this.carSearchReleaseAddData.phone_quotation = inta
			},
			//输入预算
			meInputDigit(value, index) {
				this.$utils.log("输入预算")
				this.$utils.log(JSON.stringify(value))
				if (value) {
					this.carSearchReleaseAddData.budget_money = value
				} else {
					this.carSearchReleaseAddData.budget_money = ''
				}
			},

			//备注 item的点击事件
			sortItemtap(item, index) {
				// 点击多选标签按钮触发此函数
				if (this.carSearchReleaseAddData.notes.includes(item.name)) {
					// 如果选择的数组中有要删除
					// 1. 先找到该属性在数组的下标
					var indexOf;
					for (let i = 0; i <= this.carSearchReleaseAddData.notes.length; i++) {
						if (this.carSearchReleaseAddData.notes[i] === item.name) {
							indexOf = i
						}
					}
					// 2. 从数组中删除此属性
					this.carSearchReleaseAddData.notes.splice(indexOf, 1)
					this.$utils.log('数组含有--删除' + JSON.stringify(this.carSearchReleaseAddData.notes))
				} else {
					// 如果没有就往数组里添加
					this.carSearchReleaseAddData.notes.push(item.name)
					this.$utils.log('数组没有--添加' + JSON.stringify(this.carSearchReleaseAddData.notes))
				}
			},
			//备注
			inputPhoneNotes(e) {
				this.$utils.log(JSON.stringify(e.target.value))
				if (e.target.value) {
					this.carSearchReleaseAddData.describe = e.target.value
				} else {
					this.carSearchReleaseAddData.describe = ''
				}
			},
			//置顶选择
			clickTopping() {
				if (this.carSearchReleaseAddData.topping == 0) {
					this.carSearchReleaseAddData.topping = 1
				} else {
					this.carSearchReleaseAddData.topping = 0
				}
			},
			//点击页面
			selectClick(inta) {
				switch (inta + "") {
					case "1": {
						this.$utils.log("选择车型")

						uni.navigateTo({
							url: '/pages/home/selectBrand/selectBrand?brand_type=search'
						})
						break;
					}
					case "2": {
						this.$utils.log("选择外观")
						if (this.carSearchReleaseAddData.model_two_id) {
							uni.navigateTo({
								url: '/pages/home/secondhandCar/selectColor/selectColor?model_id=' + this.carSearchReleaseAddData.model_two_id + '&colorType=searchCar'
							})
						} else {
							uni.navigateTo({
								url: '/pages/home/secondhandCar/selectColor/selectColor'
							})
						}
						break;
					}
					case "3": {
						this.$utils.log("选择上牌地区")
						uni.navigateTo({
							url: '/pages/home/secondhandCar/selectLocation/selectLocation'
						})
						break;
					}
					case "4": {
						this.$utils.log("选择车龄")
						this.$refs.car_age_popup.open()
						break;
					}
					case "5": {
						this.$utils.log("选择表里")
						this.$refs.Mileage_popup.open()
						break;
					}
				}
			},
			//数据回掉钩子 选择车型 外观内饰 上牌地区
			backData(object) {
				this.$utils.log("数据返回方法打印数据   " + JSON.stringify(object))
				switch (object.MID + "") {
					case "1": {
						this.selectBrand = object.name
						this.carSearchReleaseAddData.series_two_id = object.series_id
						if (object.custom) { //自定义车型
							this.carSearchReleaseAddData.model_two_id = ''
							this.carSearchReleaseAddData.new_label = object.name
							this.carSearchReleaseAddData.source_type_id = object.id
						} else {
							this.carSearchReleaseAddData.new_label = ''
							this.carSearchReleaseAddData.model_two_id = object.id
							this.carSearchReleaseAddData.source_type_id = object.source_type_id
						}

						

						this.selectFacade = '请选择外观内饰'
						this.carSearchReleaseAddData.appearance_name = '' //外观颜色
						this.carSearchReleaseAddData.appearance_color = '' //  外观色号
						this.carSearchReleaseAddData.interior_name = '' // 内饰颜色
						this.carSearchReleaseAddData.interior_color = '' // 内饰色号
						//选择的brand_id 品牌id来进行添加常用品牌 object.brand_id
						const data = {
							"users_id": "",
							"brand_id": "",
							"state": "4"
						}
						data.brand_id = object.brand_id
						data.users_id = this.carSearchReleaseAddData.users_id
						var that = this
						commonBrandsAdd(data).then(res => {
							that.$utils.log("添加常用品牌返回的数据  " + JSON.stringify(res))
						})
						break;
					}
					case "2": {
						this.selectFacade = object.appearance_name + '/' +
							object.interior_name
						this.carSearchReleaseAddData.appearance_name = object.appearance_name //外观颜色
						this.carSearchReleaseAddData.appearance_color = object.appearance_color //  外观色号
						this.carSearchReleaseAddData.interior_name = object.interior_name // 内饰颜色
						this.carSearchReleaseAddData.interior_color = object.interior_color // 内饰色号
						break;
					}
					case "3": {
						this.$utils.log("选择上牌地区")
						this.carSearchReleaseAddData.registration_province = object.registration_province
						this.carSearchReleaseAddData.registration_city = object.name
						if (object.name == '不限') {
							this.selectUpBrandLocation = object.registration_province
						} else {
							this.selectUpBrandLocation = object.registration_province + '/' + object.name
						}
						break;
					}
				}

			},
			sendBtn() {
				this.$utils.log("打印post数据  发布数据发布数据 ")
				this.$utils.log(JSON.stringify(this.carSearchReleaseAddData))
				var that = this
				carSearchReleaseAdd(this.carSearchReleaseAddData).then(res => {
					that.$utils.log("发布寻车返回数据" + JSON.stringify(res))
					if (res.code == 0) {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			}

		}
	}
</script>

<style>
	page {
		/* background-color: #3957BF; */
	}

	.textarea-text-view-class {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #00000;
		opacity: 1;
	}

	.car-age-btn-popup {
		width: 654rpx;
		height: 94rpx;
		background-color: #0E59EA;
		opacity: 1;
		border-radius: 14rpx;
		margin: 0rpx 46rpx;
		text-align: center;
		line-height: 94rpx;

		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
	}

	.popup-bottom-view {
		width: 100%;
		height: auto;
		background-color: white;
		padding-top: 54rpx;
		padding-bottom: 46rpx;
	}

	.car-age-text-popup {
		width: 100%;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000026;
		text-align: center;
		opacity: 1;
		margin-bottom: 22rpx;
	}

	.car-age-list-view-box {
		display: flex;
		flex-flow: row wrap;
		width: 100%;
		padding: 50rpx 19rpx;
	}

	.age-popup-car-bc-view {
		width: 160rpx;
		height: 54rpx;
		border: 1px solid #1C212514;
		border-radius: 28rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 54rpx;
		color: #1C2125;
		opacity: 1;
		margin: 0rpx 9rpx 24rpx 9rpx;
	}

	.age-popup-car-bc-select-view {
		width: 160rpx;
		height: 54rpx;
		border: 1px solid #1C212514;
		border-radius: 28rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		background-color: #EDF1FF;
		font-weight: 400;
		line-height: 54rpx;
		color: #0E59EA;
		opacity: 1;
		margin: 0rpx 6rpx;
	}

	.search-car-text-class {
		font-size: 28rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		margin-top: 40rpx;
		margin-left: 28rpx;
		margin-bottom: 16rpx;
	}

	.price-jine-text-class {
		font-size: 40rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #ED2F2F;
		opacity: 1;
	}

	.pcs {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		opacity: 1;
	}

	.beizhu-item-view-text {
		width: 180rpx;
		height: 54rpx;
		border: 2px solid #1C212514;
		border-radius: 28rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 54rpx;
		color: #1C2125;
		opacity: 1;
		margin: 0rpx 10rpx;
	}

	.beizhu-item-view-text-select {
		width: 180rpx;
		height: 54rpx;
		background: #EDF1FF99;
		border-radius: 28rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 54rpx;
		color: #0E59EA;
		opacity: 1;
		margin: 0rpx 10rpx;
	}



	.beizhu-text-class {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.beizhu-duoxuankuang-view-box {
		display: flex;
		flex-flow: row wrap;
	}

	.yes-no-text-class {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.btnBg {
		background-color: #3957BF;
	}

	.color-white {
		color: white;
		font-weight: bold;
	}

	.pad25-0 {
		padding: 25rpx 0rpx;
	}

	.marginbottom80 {
		margin-bottom: 80rpx;
	}

	.text-center {
		text-align: center;
	}

	.height100 {
		height: 100rpx;
	}

	.marginTop10 {
		margin-top: 10rpx;
	}

	.page-wraper {
		margin-top: 20rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: white;
		padding: 20rpx;
	}

	.pad20-10 {
		padding: 20rpx 10rpx;
	}

	.flex3 {
		flex: 3;
	}

	.flex7 {
		flex: 7;
	}


	.border-s1c {

		border-style: solid;
		border-width: 1rpx;
		border-color: #eee;
	}

	.borderAll20 {
		border-radius: 20rpx;
	}


	.width93 {
		width: 93%;
	}

	.width100 {
		width: 100%;
	}

	.text-view {
		font-size: 30rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #000026;
		opacity: 1;
	}

	.marginleft20 {
		margin-left: 20rpx;
	}

	.line {
		width: 100%;
		height: 3rpx;
		background-color: #eee;
	}

	.box-class {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 35rpx 0rpx;
	}

	.left-view-class {
		flex: 1;
		text-align: left;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.center-view-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		justify-content: center;
	}

	.image-class-star {
		width: 20rpx;
		height: 20rpx;
		margin-right: 5rpx;
	}

	.image-class-check-mark {
		width: 42rpx;
		height: 42rpx;
	}

	.no-select-image {
		width: 38rpx;
		height: 38rpx;
		background: #FFF;
		border-style: solid;
		border-color: #00000009;
		border-radius: 50%;
		border-width: 4rpx;
	}

	.text-class {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.marginLeft30 {
		margin-left: 30rpx;
	}

	.marginright30 {
		margin-right: 30rpx;
	}

	.marginTop20 {
		margin-top: 20rpx;
	}

	.right-view-class {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.text-align-right {
		text-align: right;
	}

	.image-class-right {
		width: 30rpx;
		height: 30rpx;
	}

	.left-margin,
	.right-view {
		margin-left: 10rpx;
	}

	.text-color {
		color: #777;
	}

	.image-bg-select {
		background-color: #3957BF;
		padding: 6rpx;
		border-radius: 50%;
	}

	.image-bg {
		border-style: solid;
		border-color: #ccc;
		border-width: 1rpx;
		padding: 6rpx;
		border-radius: 50%;
	}

	.search-content-up-text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
		margin-left: 28rpx;
	}

	.text32 {
		font-size: 38rpx;
		font-weight: bold;
	}
</style>